import React from 'react';
import { Card, Button } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useLanguage } from '../../i18n/I18nProvider';
import './CleanupCard.scss';

interface CleanupCardProps {
  title: string;
  description: string;
  icon: React.ReactNode;
  path: string;
}

const CleanupCard: React.FC<CleanupCardProps> = ({ title, description, icon, path }) => {
  const { t } = useLanguage();
  const navigate = useNavigate();

  const handleOpen = () => {
    navigate(path);
  };

  return (
    <Card 
      className="cleanup-card"
      title={
        <div className="card-title">
          <span className="icon">{icon}</span>
          <span className="title-text">{title}</span>
        </div>
      }
      actions={[
        <Button key="enter" type="primary" onClick={handleOpen}>
          {t('cleanup.enter')} <ArrowRightOutlined />
        </Button>,
      ]}
    >
      <div className="card-content">
        <p className="description">{description}</p>
      </div>
    </Card>
  );
};

export default CleanupCard;
